<template>
	<div class="bind-id-card-back-wrapper">
		<label class="label-container">{{ '身份证反面：' }}</label>
		<div class="select-contianer">
			<el-row>
				<el-col :span="12">
					<CardSelect
						:label="'签发机关'"
						:variableList="variableList"
						:roleList="roleList"
						:activeRoleId="activeRoleId"
						:disabled="disabled"
						@checkRole="checkRole"
						:id="getCheckedID('issueAuthority')"
						@onCheck="data => changeCardProps('issueAuthority', data)"
						@clearValue="id => clearValue('issueAuthority', id)"
					/>
				</el-col>
				<el-col :span="12">
					<CardSelect
						:label="'有效日期'"
						:variableList="variableList"
						:roleList="roleList"
						:activeRoleId="activeRoleId"
						:disabled="disabled"
						:id="getCheckedID('validPeriod')"
						@checkRole="checkRole"
						@onCheck="data => changeCardProps('validPeriod', data)"
						@clearValue="id => clearValue('validPeriod', id)"
					/>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
import CardSelect from './CardSelect.vue';
export default {
	components: { CardSelect },
	props: {
		variableList: {
			type: Array,
			default: () => []
		},
		roleList: {
			type: Array,
			default: () => []
		},
		identifyResult: {
			type: Array,
			default: () => []
		},
		activeRoleId: {
			type: Number,
			default: () => 0
		},
		disabled: {
			type: Boolean,
			default: () => false
		}
	},
	methods: {
		checkRole(id) {
			this.$emit('checkRole', id);
		},
		changeCardProps(type, data) {
			this.$emit('changeCardProps', type, data);
		},
		clearValue(type, id) {
			this.$emit('clearValue', { type, id });
		},
		getCheckedID(type) {
			return this.identifyResult.find(item => item.fieldName === type)?.id || '';
		}
	}
};
</script>

<style lang="less" scoped>
.bind-id-card-back-wrapper {
	display: flex;
	.select-contianer {
		flex-grow: 1;
	}
	.label-container {
		width: 120px;
		line-height: 40px;
		text-align: center;
	}
}
</style>
